<script setup>
import { ref } from 'vue';
import { loadCore } from '@/federation';

const {
    Layout: WxyLayout,
    Button: WxyButton,
    Form: WxyForm,
    FormItem: WxyFormItem,
    FormInline: WxyFormInline,
    Space: WxySpace,
    Radio: WxyRadio,
    Checkbox: WxyCheckbox,
    Switch: WxySwitch,
} = loadCore();

const onSubmit = () => {
    console.log('submit');
}

const data = ref({
    name: '123',
    name2: 'qwe',
    sex: '1',
    opend: true
});

const onClick = (checked, done) => {
    setTimeout(() => {
        done(true);
    }, 1000);
};
</script>

<template>
    <WxyLayout>
        <WxyForm :data="data" @submit="onSubmit" border>
            <WxyFormInline nouse>
                <WxyFormItem label="姓名" prop="name" />
                <WxyFormItem label="年龄" prop="name2" type="textarea" />
                <WxyFormItem label="性别" required pane>
                    <WxySpace gap="16">
                        <WxyRadio v-model="data.sex" value="1" label="男" />
                        <WxyCheckbox v-model="data.sex" value="2" label="女" />
                    </WxySpace>
                </WxyFormItem>
                <WxyFormItem label="地址" pane>
                    <WxySwitch v-model="data.opend" @click="onClick" checked-text="开" unchecked-text="关" />
                </WxyFormItem>
                <WxyFormItem :border="false">
                    <WxySpace wrap>
                        <WxyButton type="secondary" status="gray">返回</WxyButton>
                        <WxyButton native-type="submit">提交</WxyButton>
                    </WxySpace>
                </WxyFormItem>
            </WxyFormInline>
        </WxyForm>
    </WxyLayout>
</template>